<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成绩列表管理</title>
    <script src="js/echarts.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <style>
        .el-table  .orange-row {
            background: #e7dfd7;
        }

        .el-table .light-greenz-row {
            background: #d0e6d0;
        }
        /* 缩小表单输入框和选择框的宽度 */
        .el-input, .el-select {
            width: 100px;
        }
        /* 缩小日期选择器的宽度 */
       /* .el-date-picker {
            width: 120px;
        }*/

    </style>
</head>
<body>
<div id = "app">
    <div id="list">
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="学生姓名">
                <el-input v-model="form.name" placeholder="学生名"></el-input>
            </el-form-item>
            <el-form-item label="作业类型">
                <el-select v-model="form.homeworkType" placeholder="请选择作业类型">
                    <el-option label="每日作业" value="每日作业"></el-option>
                    <el-option label="周测" value="周测"></el-option>
                    <el-option label="阶段测试" value="阶段测试"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开始日期">
                <el-date-picker
                        v-model="form.startDate"
                        type="date"
                        placeholder="选择开始日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期">
                <el-date-picker
                        v-model="form.endDate"
                        type="date"
                        placeholder="选择结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="老师姓名">
                <el-input v-model="form.teacherName" placeholder="老师名"></el-input>
            </el-form-item>
            <el-form-item label="座位">
                <el-select v-model="form.seatIndex" placeholder="座位排数">
                    <el-option label="第1排" value="第1排"></el-option>
                    <el-option label="第2排" value="第2排"></el-option>
                    <el-option label="第3排" value="第3排"></el-option>
                    <el-option label="第4排" value="第4排"></el-option>
                    <el-option label="第5排" value="第5排"></el-option>
                    <el-option label="第6排" value="第6排"></el-option>
                    <el-option label="第7排" value="第7排"></el-option>
                    <el-option label="第8排" value="第8排"></el-option>
                    <el-option label="第9排" value="第9排"></el-option>
                    <el-option label="第10排" value="第10排"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryData">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="handleImportExcel">导入 excel 数据</el-button>
            </el-form-item>
        </el-form>
    </div>
    <el-table
            :data="tableData"
            :row-class-name="tableRowClassName"
            style="width: 100%">
        <el-table-column
                type="index"
                label="序号">
        </el-table-column>
        <el-table-column
                prop="name"
                label="学生姓名">
        </el-table-column>
        <el-table-column
                prop="homeworkType"
                label="作业类型">
        </el-table-column>
        <el-table-column
                prop="submitTime"
                label="提交时间">
        </el-table-column>
        <el-table-column
                prop="score"
                label="分数">
        </el-table-column>
        <el-table-column
                prop="teacherName"
                label="阅卷老师">
        </el-table-column>
        <el-table-column
                prop="descript"
                label="评语">
        </el-table-column>
        <el-table-column
                prop="seatIndex"
                label="座位">
        </el-table-column>
        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <center>
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </center>
    <div v-if="showZhuTu" id="div" style="width: 100%;height: 900px">

    </div>
    <el-dialog :visible.sync="dialogVisible" title="导入 Excel 文件">
        <el-form :model="uploadForm">
            <el-form-item label="Excel 文件">
                <el-upload
                        ref="upload"
                        action="#"
                        :show-file-list="false"
                        :before-upload="beforeUpload"
                        :on-success="handleUploadSuccess"
                        :on-error="handleUploadError">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
        </div>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            showZhuTu: true,
            form: {
                name: '',
                homeworkType: '',
                startDate: '',
                endDate: '',
                teacherName: '',
                seatIndex: ''
            },
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            total: 110,
            dialogVisible: false,
            uploadForm: {
                excel: null
            }
        },
        mounted() {
            this.queryData();
        },
        methods: {
            queryData() {
                const params = {
                    ...this.form,
                    page: this.currentPage,
                    pageSize: this.pageSize
                };
                axios.post('studentScore/listByPage', params)
                    .then(response => {
                        this.tableData = response.data.data.data;
                        this.total = response.data.data.total;
                    })
                    .catch(error => {
                        console.error('查询出错:', error);
                    });
            },
            tableRowClassName({ rowIndex }) {
                if (rowIndex % 4 == 1) {
                    return 'light-greenz-row';
                } else if (rowIndex  % 4 == 3) {
                    return 'orange-row';
                } else {
                    return '';
                }
            },
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.tableData.splice(admin, 1);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.queryData();
            },
            handleCurrentChange(newPage) {
                this.currentPage = newPage;
                this.queryData();
            },
            handleImportExcel() {
                this.dialogVisible = true;
            },
            beforeUpload(file) {
                this.uploadForm.excel = file;
                return false;
            },
            submitUpload() {
                const formData = new FormData();
                formData.append('excel', this.uploadForm.excel);
                axios.post('studentScore/insertByExcel', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                })
                    .then(response => {
                        this.$message({
                            type: 'success',
                            message: '上传成功'
                        });
                        this.dialogVisible = false;
                        this.queryData();
                    })
                    .catch(error => {
                        this.$message({
                            type: 'error',
                            message: '上传失败'
                        });
                        console.error('上传出错:', error);
                    });
            },
            handleUploadSuccess(response, file, fileList) {
                this.$message({
                    type: 'success',
                    message: '上传成功'
                });
                this.dialogVisible = false;
                this.queryData();
            },
            handleUploadError(error, file, fileList) {
                this.$message({
                    type: 'error',
                    message: '上传失败'
                });
                console.error('上传出错:', error);
            }
        }
    });
</script>

</body>
</html>
